import { ColorList } from '@/store/constant'
import { CopyButton } from '@/components'
import { grey } from '@mui/material/colors'
import { StackProps } from '@mui/material'
type Props = {
  row: any
  copyKey?: string
} & StackProps

const NameGradeCell = ({ row, copyKey, ...rest }: Props) => {
  const matchGrade = parseInt(row.grade?.match(/\d+/))
  const color = get(ColorList, matchGrade, grey)
  return (
    <Stack sx={{ width: '100%' }} justifyContent="space-between" alignItems="center" direction="row" {...rest}>
      <Chip
        sx={{ bgcolor: grey[100], maxWidth: 160 }}
        label={<Typography>{row.name}</Typography>}
        avatar={
          <Avatar sx={{ bgcolor: color[50] }} alt="grade">
            <Typography variant="subtitle1" color={color[800]}>
              {row.grade}
            </Typography>
          </Avatar>
        }
      ></Chip>
      {copyKey && <CopyButton value={row[copyKey]} />}
    </Stack>
  )
}

export default NameGradeCell
